M

MLOG

Suomi

Hyödynnä JavaScript Intl API:n avulla globaalia kattavuutta. Opi kansainvälistymisen parhaat käytännöt.

JavaScript Intl API: Kansainvälistymisen parhaat käytännöt globaalille yleisölle

Nykypäivän verkottuneessa maailmassa on elintärkeää luoda verkkosovelluksia, jotka palvelevat globaalia yleisöä. JavaScript Intl API tarjoaa tehokkaita työkaluja kansainvälistymiseen (i18n), joiden avulla voit muotoilla päivämääriä, numeroita, valuuttoja ja paljon muuta eri paikallisten sopimusten mukaisesti. Tämä artikkeli käsittelee parhaita käytäntöjä Intl API:n hyödyntämiseen todella globaalien sovellusten rakentamisessa.

Kansainvälistymisen (i18n) ja lokalisoinnin (l10n) ymmärtäminen

Ennen kuin sukellamme Intl API:n yksityiskohtiin, on tärkeää ymmärtää ero kansainvälistymisen (i18n) ja lokalisoinnin (l10n) välillä. I18n on prosessi, jossa sovellukset suunnitellaan ja kehitetään siten, että niitä voidaan helposti mukauttaa eri kieliin ja alueisiin ilman teknisiä muutoksia. L10n puolestaan on kansainvälistetyn sovelluksen mukauttamisprosessi tiettyyn paikalliseen ympäristöön kääntämällä tekstiä ja mukauttamalla muita paikalliskohtaisia elementtejä.

Intl API keskittyy i18n-näkökulmaan tarjoamalla mekanismeja paikalliskohtaisten tietojen käsittelyyn, kun taas lokalisointi sisältää tyypillisesti käännösten ja paikalliskohtaisten määritysten tarjoamisen.

Intl API:n keskeiset komponentit

Intl API koostuu useista keskeisistä objekteista, joista jokainen vastaa kansainvälistymisen tietyistä osa-alueista:

Parhaat käytännöt Intl API:n käyttöön

Jotta voit hyödyntää Intl API:a tehokkaasti ja varmistaa positiivisen käyttäjäkokemuksen globaalille yleisöllesi, harkitse seuraavia parhaita käytäntöjä:

1. Määritä oikea paikallinen ympäristö

Kansainvälistymisen perusta on oikean paikallisen ympäristön määrittäminen. Paikallinen ympäristö tunnistaa kielen, alueen ja mahdolliset erityiset muunnelmat, joita käytetään muotoilussa. Voit hankkia käyttäjän ensisijaisen paikallisen ympäristön navigator.language -ominaisuudesta tai Accept-Language -HTTP-otsakkeesta.

Intl-objekteja luotaessa voit määrittää paikallisen ympäristön merkkijonona tai merkkijonojen taulukkona. Jos annat taulukon, API yrittää löytää parhaiten vastaavan paikallisen ympäristön käytettävissä olevista vaihtoehdoista.

Esimerkki:

const locale = navigator.language || 'en-US';
const numberFormat = new Intl.NumberFormat(locale);

Jos käyttäjän ensisijainen paikallinen ympäristö ei ole käytettävissä, voit antaa varalokalin. Voit esimerkiksi käyttää oletusarvona 'en-US', jos käyttäjän selain ilmoittaa tukemattoman paikallisen ympäristön.

2. Hyödynnä Intl.DateTimeFormat päivämäärien ja aikojen muotoiluun

Päivämäärien ja aikojen oikea muotoilu on välttämätöntä lokalisoitua kokemusta varten. Intl.DateTimeFormat -objekti antaa sinun muotoilla päivämääriä ja aikoja tietyn paikallisen ympäristön sopimusten mukaisesti.

Voit mukauttaa muotoilua määrittämällä erilaisia ​​vaihtoehtoja, kuten vuoden, kuukauden, päivän, tunnin, minuutin ja sekunnin muotoilun. Voit myös määrittää aikavyöhykkeen varmistaaksesi, että päivämäärät ja ajat näytetään oikein eri puolilla maailmaa oleville käyttäjille.

Esimerkki:

const locale = 'de-DE'; // Saksa (Saksa)
const date = new Date();
const options = {
  year: 'numeric',
  month: 'long',
  day: 'numeric',
  hour: 'numeric',
  minute: 'numeric',
  timeZone: 'Europe/Berlin'
};

const dateTimeFormat = new Intl.DateTimeFormat(locale, options);
const formattedDate = dateTimeFormat.format(date); // Tuloste: esim. "22. Mai 2024, 14:30"
console.log(formattedDate);

Tämä esimerkki muotoilee nykyisen päivämäärän ja ajan saksalaisen (Saksa) paikallisen ympäristön mukaisesti, mukaan lukien vuoden, kuukauden, päivän, tunnin ja minuutin. Se määrittää myös 'Europe/Berlin' -aikavyöhykkeen.

Muista ottaa huomioon eri puolilla maailmaa käytettävät päivämäärien ja aikojen muodot. Esimerkiksi Yhdysvalloissa käytetään MM/PP/VVVV, kun taas monissa muissa maissa käytetään PP/MM/VVVV.

3. Käytä Intl.NumberFormat numero-, valuutta- ja prosenttimuotoiluun

Intl.NumberFormat -objekti tarjoaa joustavan tavan muotoilla numeroita, valuuttoja ja prosentteja paikalliskohtaisten sopimusten mukaisesti. Voit mukauttaa muotoilua määrittämällä vaihtoehtoja, kuten valuutta, tyyli (desimaali, valuutta tai prosentti), minimi- ja maksimidesimaalierottimet ja paljon muuta.

Esimerkki (Valuutan muotoilu):

const locale = 'ja-JP'; // Japani (Japani)
const amount = 12345.67;
const options = {
  style: 'currency',
  currency: 'JPY'
};

const numberFormat = new Intl.NumberFormat(locale, options);
const formattedAmount = numberFormat.format(amount); // Tuloste: esim. "￥12,346"
console.log(formattedAmount);

Tämä esimerkki muotoilee luvun 12345.67 japanin jeneiksi (JPY). Huomaa, että valuuttasymboli (￥) ja ryhmittelyerotin (,) säädetään automaattisesti japanilaisen paikallisen ympäristön mukaisesti.

Esimerkki (Prosenttimuotoilu):

const locale = 'ar-EG'; // Arabia (Egypti)
const percentage = 0.75;
const options = {
  style: 'percent',
  minimumFractionDigits: 2
};

const numberFormat = new Intl.NumberFormat(locale, options);
const formattedPercentage = numberFormat.format(percentage); // Tuloste: esim. "٧٥٫٠٠٪"
console.log(formattedPercentage);

Tämä esimerkki muotoilee luvun 0.75 prosentteina arabiaksi (Egypti). Tuloste sisältää arabialaisen prosenttimerkin (٪) ja kaksi desimaalia.

Tärkeitä huomioita valuutan muotoilussa:

4. Käsittele monikkomuodostusta oikein Intl.PluralRules-säännöillä

Monikon muodostussäännöt vaihtelevat merkittävästi kielten välillä. Esimerkiksi englannissa on yksinkertaiset säännöt, joissa on yksikkö- ja monikkomuodot, kun taas muissa kielissä on monimutkaisempia sääntöjä, jotka perustuvat luvun arvoon. Intl.PluralRules -objekti auttaa sinua määrittämään oikean monikkomuodon tietylle luvulle ja paikalliselle ympäristölle.

Esimerkki:

const locale = 'ru-RU'; // Venäjä (Venäjä)
const pluralRules = new Intl.PluralRules(locale);

function getPluralForm(count) {
  const rule = pluralRules.select(count);
  switch (rule) {
    case 'one': return 'товар'; // tovar (yksikkö)
    case 'few': return 'товара'; // tovara (muutama)
    case 'many': return 'товаров'; // tovarov (monta)
    default: return 'товаров'; // Oletusarvo monta
  }
}

const count = 5;
const pluralForm = getPluralForm(count);
console.log(`${count} ${pluralForm}`); // Tuloste: "5 товаров"

Tämä esimerkki havainnollistaa, kuinka Intl.PluralRules -sääntöjä käytetään oikean monikkomuodon saamiseksi sanalle "товар" (esine) venäjän kielessä. Venäjän kielessä on erilaisia monikkomuotoja sen mukaan, päättyykö luku ykköseen, 2-4:ään vai 5-9:ään.

5. Muotoile luetteloita Intl.ListFormat-säännöillä

Kun esitetään tavaraluetteloita, muotoilu voi vaihdella paikallisten ympäristöjen välillä. Intl.ListFormat -objekti antaa sinun muotoilla luetteloita paikalliskohtaisten sopimusten mukaisesti, mukaan lukien erilaisten konjunktioiden (esim. "ja", "tai") ja luettelomerkkien (esim. pilkut, puolipisteet) käyttö.

Esimerkki:

const locale = 'es-ES'; // Espanja (Espanja)
const list = ['manzanas', 'naranjas', 'plátanos'];
const listFormat = new Intl.ListFormat(locale, { style: 'long', type: 'conjunction' });

const formattedList = listFormat.format(list); // Tuloste: "manzanas, naranjas y plátanos"
console.log(formattedList);

Tämä esimerkki muotoilee hedelmäluettelon espanjaksi (Espanja) käyttäen "y" (ja) -konjunktiota kahden viimeisen kohteen yhdistämiseen.

6. Muotoile suhteellisia aikoja Intl.RelativeTimeFormat-säännöillä

Suhteellisten aikojen (esim. "eilen", "2 tunnin kuluttua") näyttäminen tarjoaa käyttäjäystävällisen tavan esittää aikatietoja. Intl.RelativeTimeFormat -objekti antaa sinun muotoilla suhteellisia aikoja paikalliskohtaisten sopimusten mukaisesti.

Esimerkki:

const locale = 'fr-CA'; // Ranska (Kanada)
const rtf = new Intl.RelativeTimeFormat(locale, { numeric: 'auto' });

console.log(rtf.format(-1, 'day')); // Tuloste: "hier"
console.log(rtf.format(2, 'day')); // Tuloste: "dans 2 jours"

Tämä esimerkki muotoilee suhteellisia aikoja ranskaksi (Kanada). Tuloste näyttää "hier" (eilen) ja "dans 2 jours" (kahden päivän kuluttua).

numeric -vaihtoehto määrittää, miten luvut näytetään. 'auto' näyttää suhteellisia sanoja, kun ne ovat käytettävissä (kuten "eilen"), ja muuten lukuja. 'always' näyttää aina lukuja.

7. Laittele merkkijonoja Intl.Collator-säännöillä

Merkkijonojen vertailu on paikalliskohtaista. Merkkijonojen lajittelutapa vaihtelee kielestä riippuen. Esimerkiksi saksassa merkki "ä" lajitellaan tyypillisesti kuten "a", kun taas ruotsissa se lajitellaan "z":n jälkeen. Intl.Collator -objekti antaa sinun verrata merkkijonoja tietyn paikallisen ympäristön sääntöjen mukaisesti.

Esimerkki:

const locale = 'de-DE';
const collator = new Intl.Collator(locale);

const strings = ['äpfel', 'birnen', 'bananen', 'aprikosen'];
strings.sort(collator.compare);

console.log(strings); // Tuloste: ["äpfel", "aprikosen", "bananen", "birnen"]

Tämä esimerkki lajittelee joukon saksankielisiä sanoja käyttämällä Intl.Collator -sääntöjä. Huomaa, että "äpfel" lajitellaan ennen "aprikosen", vaikka "ä" tulee myöhemmin aakkosissa.

8. Käsittele reunatapauksia ja puuttuvia tietoja

Kaikkia paikallisia ympäristöjä eivät tue kaikki selaimet tai ympäristöt. On tärkeää käsitellä reunatapauksia, joissa paikallinen ympäristö ei ole käytettävissä tai kun tietoja puuttuu. Harkitse seuraavia strategioita:

9. Testaa perusteellisesti eri paikallisten ympäristöjen kanssa

Perusteellinen testaus on ratkaisevan tärkeää sen varmistamiseksi, että kansainvälistetty sovelluksesi toimii oikein kaikissa tuetuissa paikallisissa ympäristöissä. Testaa sovelluksesi erilaisilla paikallisilla ympäristöillä, mukaan lukien kielillä, jotka käyttävät erilaisia ​​merkistöjä, päivämäärä- ja aikamuotoja, numeromuotoja ja monikon muodostussääntöjä.

Harkitse automatisoitujen testityökalujen käyttöä varmistaaksesi, että sovelluksesi toimii odotetusti eri paikallisissa ympäristöissä.

10. Harkitse suorituskykyvaikutuksia

Vaikka Intl API on yleensä tehokas, Intl-objektien luominen voi olla suhteellisen kallista. Suorituskyvyn optimoimiseksi harkitse seuraavia:

Intl API:n ulkopuolella: Lisähuomioita kansainvälistymiseen

Vaikka Intl API tarjoaa tehokkaita työkaluja tietojen muotoiluun, kansainvälistyminen sisältää enemmän kuin vain muotoilun. Harkitse seuraavia lisätekijöitä:

Johtopäätös

JavaScript Intl API on korvaamaton työkalu verkkosovellusten rakentamiseen, jotka palvelevat globaalia yleisöä. Noudattamalla tässä artikkelissa esitettyjä parhaita käytäntöjä voit luoda sovelluksia, jotka eivät ole vain toiminnallisia, vaan myös kulttuurisesti herkkiä ja käyttäjäystävällisiä käyttäjille ympäri maailmaa. Hyödynnä Intl API:n voimaa ja avaa sovelluksesi potentiaali maailmanlaajuisesti. Intl API:n hallitseminen johtaa inklusiivisempaan ja saavutettavampaan kokemukseen kaikille käyttäjillesi sijainnista tai kielestä riippumatta.